<script setup>
import Commentitem from '@/components/Comment/commentitem.vue';
// import FirstLevelComment from "@/views/videoPlayView/components/FirstLevelComment.vue";
import { onMounted,ref,computed } from 'vue';
import VideoApi from "@/apis/VideoApi.js";
// import { ElPagination } from 'element-plus';

const videos = ref([])

onMounted(async () => {
  // directCommentList();
  await fetchUserVideos();
  for( let i = 0; i < videos.value.length; i++){
    await fetchVideoFirstComment(videos.value[i].fvid);
  }
})

const allCommentList = ref([])

const pageSize = 10;
const currentPage = ref(1);
const totalComments = computed(() => allCommentList.value.length);
const totalPages = computed(() => Math.ceil(totalComments.value / pageSize));

const paginatedComments = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    return allCommentList.value.slice(start, end);
});

function handlePageChange(page) {
    currentPage.value = page;
}

const fetchUserVideos = async () => {
  const res = await VideoApi.fetchUserVideo();
  console.log('用户视频',res);
  videos.value = res.data.videos
}

const fetchVideoFirstComment = async (fvid) => {
  const res = await VideoApi.fetchFirstComments(fvid,10,1);
  console.log('视频评论',res);
  const firstCommentList = res.data.comment_list
  for (const comment of firstCommentList) {
    allCommentList.value.push(comment);
    const secondCommentList = await fetchVideoSecondComment(comment.id);
    console.log('二级评论',secondCommentList)
    if (Array.isArray(secondCommentList)) {
      allCommentList.value.push(...secondCommentList); // 将二级评论也添加到 allComments
    }
  }
  console.log('全部评论',allCommentList.value)
}

const fetchVideoSecondComment = async (cid) => {
    const res = await VideoApi.fetchSecondComments(cid, 10, 1);
    console.log('视频二级评论', res);
    return res.data.comment_second_list;
};

// const fetchVideoSecondComment = async (cid) => {
//   const res = await VideoApi.fetchSecondComments(cid,10,1);
//   console.log('视频二级评论',res);
// }


// async function directCommentList() {
//     CommentList.value.commentList = [
//         { id: 1, userid: 1, videoid: 1, commentid: null, time: '2025-01-01T00:00:00Z', content: '111111' },
//         { id: 2, userid: 2, videoid: 1, commentid: null, time: '2025-01-01T00:00:00Z', content: '222222' },
//         { id: 3, userid: 3, videoid: 1, commentid: null, time: '2025-01-01T00:00:00Z', content: '333333' },
//         { id: 4, userid: 4, videoid: 1, commentid: null, time: '2025-01-01T00:00:00Z', content: '444444' },
//         { id: 5, userid: 5, videoid: 1, commentid: null, time: '2025-01-01T00:00:00Z', content: '555555' },
//         { id: 6, userid: 5, videoid: 1, commentid: null, time: '2025-01-01T00:00:00Z', content: '666666' },
//         { id: 7, userid: 6, videoid: 2, commentid: null, time: '2025-01-01T00:00:00Z', content: '777777' },
//         { id: 8, userid: 6, videoid: 2, commentid: null, time: '2025-01-01T00:00:00Z', content: '888888' },
//         { id: 9, userid: 6, videoid: 2, commentid: null, time: '2025-01-01T00:00:00Z', content: '999999' },
//         { id: 10, userid: 7, videoid: 2, commentid: null, time: '2025-01-01T00:00:00Z', content: '000000' },
//         { id: 11, userid: 8, videoid: 2, commentid: null, time: '2025-01-01T00:00:00Z', content: '121212' },
//         { id: 12, userid: 9, videoid: 2, commentid: null, time: '2025-01-01T00:00:00Z', content: '232323' }
// ];
// }

</script>

<template>
<div class="comment_wrap cc-content-body pos-center">
    <div class="top-wrap">
        <div class="top-container">
            <a class="top-item">
                <span>用户评论</span>
            </a>
        </div>
    </div>
    <div class="content">
        <div class="postlist">
            <div class="post" v-for="(comment, index) in paginatedComments" :key="comment.id">
                <Commentitem
                :content="comment.comment_content"
                :userId="comment.user_id"
                :time="comment.time"
                :likeNum="comment.likeNum"
                :videoid="comment.video_id"
                >

                </Commentitem>
            </div>
        </div>
    </div>
    <div class="pagination_container">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="totalComments"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
            class="pagination"
        />
        <div class="pagination-info">
            <span class="total-pages">共{{ totalPages }}页 / {{ totalComments }}个</span>
        </div>
    </div>
</div>
</template>

<style scoped lang="less">
.comment_wrap.cc-content-body.pos-center{
    width: 80%;
    margin: 0 auto;
    margin-top: 16px;

    .top-wrap{
        position: relative;

        .top-container{
            background: #fff;
            height: 64px;
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: flex !important;
            border-bottom: 1px solid #e7e7e7;
            position: relative;

            .top-item{
                color: #00a1d6;
                border-bottom: 3px solid #00a1d6;
                font-weight: bolder;

                padding-top: 26px;
                height: 100%;
                margin-left: 40px;
                font-size: 16px;
                letter-spacing: .5px;
                line-height: 20px;
                position: relative;
            }
        }
    }

    .content{

        .postlist{
            margin: 0;
            padding: 0;
        }
    }

    .pagination_container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .pagination-info {
        text-align: right;
        font-size: 14px;
        color: #666;

        .total-pages {
            margin-left: 10px;
        }
    }
}
</style>
